import * as BL from 'babylon-lib/index';
import { DefaultStage } from "./stages/default-stage";
import { RawAssetsUrl } from "./raw-assets-info";
import { createRoot } from 'react-dom/client';
import { AppUI } from './ui/app-ui';


export default class AppContainer extends BL.BabylonContainer {

    protected options(): BL.IContainerOptions {
        return {
            adaptToDeviceRatio: true,
            engineOptions:{
                limitDeviceRatio:1.5,
                preserveDrawingBuffer:true,
            },
            useRightHand:true,
        };
    }
    protected loadingUI(): HTMLElement | null {
        return document.getElementById('loading-page');
    }

    protected initializeStages(engine: BL.Engine, canvas: HTMLCanvasElement, bufferLoader: BL.BufferLoad): Array<BL.Stage> {
        const stage = new DefaultStage(engine, canvas, bufferLoader);
        return [stage];
    }

    protected preloadAssetsUrl(): BL.ILoose<string> {
        return {
            background: RawAssetsUrl.background,
            ground: RawAssetsUrl.ground,
            lightCubePx: RawAssetsUrl.lightCubePX,
            lightCubePz: RawAssetsUrl.lightCubePZ,
            hdrCube: RawAssetsUrl.hdrCube,
            music: RawAssetsUrl.music,
            video: RawAssetsUrl.video,
            movie: RawAssetsUrl.movie
        };
    }

    protected renderUI(): void {
        const root=createRoot(this.ui);
        root.render(<AppUI/>);
    }
    

}